<template>
<div class="advance-query-form">
  <transition name="el-fade-in-linear">
    <el-container v-if="showType == 'list'">
      <el-aside width="200px" style="border-right: 1px solid #EBEEF5;">
        <el-card class="base-card" shadow="never" :body-style="{ padding: '0px' }" style="border: none;">
          <div slot="header" class="title">栏目类型</div>
          <el-scrollbar :style="{'height': (getMainContextHeight - 51) + 'px'}" class="custom-scroll">
            <ul class="ulStyle">
              <li v-for="(item,index) in currentList" @click="nodeClick(item,index)" :key="index" :class="{active:currentIndex===index}" class="liItem">{{item.name}}</li>
            </ul>
          </el-scrollbar>
        </el-card>
      </el-aside>
      <el-main>
        <tableList ref="table" :infoItem="currentType" class="pl10" @onAdd="onAdd" @handleEdit="onEdit" @handleDetail="onDetail"></tableList>
      </el-main>
    </el-container>
  </transition>
  <transition name="el-fade-in-linear">
    <div style="position: relative" v-if="showType == 'form'" class="bgWhite px20 py20">
      <header-handle :headerContent="headerContent" :buttons="formStatus != 'show' ? handleButtons : []" @goBack="goBack"></header-handle>
      <el-divider class="mt0 mb12"></el-divider>
      <FormDetail ref="noticeRef" :formStatus="formStatus" :initForm="editFormData" :initData="initData"></FormDetail>
    </div>
  </transition>
</div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
import {
  treeDataTranslate
} from '@/utils';
import {
  DictionaryController,
  PracticalController
} from '@/api';
import tableList from './table/index.vue'
import FormDetail from './form/index.vue'
export default {
  name: "notice",
  components: {
    tableList,
    FormDetail
  },
  data() {
    return {
      currentList: [],
      current: undefined,
      currentIndex: 0,
      currentType: "1",
      statusList: [{
        label: "全部",
        status: "-1"
      }, {
        label: "草稿",
        status: "0"
      }, {
        label: "已发布",
        status: "1"
      }, {
        label: "已下线",
        status: "2"
      }],
      activeName: "-1",
      formStatus: "",
      editFormData: {},
      showType: "list",
      handleButtons: [{
          status: 1,
          label: '取消',
          method: () => {
            this.goBack();
          },
        },
        {
          type: 'primary',
          status: 1,
          label: '确定',
          method: () => {
            this.onConfirm();
          },
        }
      ],
      initData: {
        infoItem: {},
        infoSource: {},
      },
      headerContent: ""
    }
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  methods: {
    nodeClick(data, index) {
      this.currentIndex = index;
      this.currentType = data.id;
      this.$nextTick(() => {
        this.$refs.table.refreshNotice(false);
      })

    },
    getDicData(code, callBack) {
      let params = {};
      params.dictCode = code;
      DictionaryController.dictGlobalDict(this, params).then(res => {
        callBack(res.getList())
      }).catch(e => {});
    },
    handleClick() {

    },
    onAdd() {
      let me = this;
      me.formStatus = "add";
      me.showType = "form";
      me.editFormData = {
        infoItem: me.currentType
      };
      me.headerContent = "新建通知公告"
    },
    onEdit(val) {
      this.formStatus = "edit";
      this.editFormData = val;
      this.showType = "form";
      this.headerContent = "编辑通知公告"
    },
    onDetail(val) {
      this.formStatus = "show";
      this.editFormData = val;
      this.showType = "form";
      this.headerContent = "查看通知公告"
    },
    goBack() {
      this.showType = 'list'
    },
    onConfirm() {
      let me = this;
      let length = Object.values(me.$refs.noticeRef.getFormData()).length;
      if (length > 0) {
        let data = me.$refs.noticeRef.getFormData();
        data.infoType = 20;
        PracticalController.add(me, data).then(res => {
          me.$message.success("保存成功");
          me.showType = 'list'
        })
      }
    }
  },
  mounted() {
    this.getDicData("InfoItem", (data) => {
      this.currentList = data;
      this.initData.infoItem.dropdownList = data;
    })
    this.getDicData("InfoSource", (data) => {
      this.initData.infoSource.dropdownList = data;
    })
  }
}
</script>
<style lang="scss" scoped>
.infoTabStyle {
    background-color: white;
    padding: 0 20px;
}
.title {
    font-size: 18px;
    text-align: center;
    padding: 12px 8px;
}
.active {
    background-color: #fdeced;
}

.ulStyle {
    padding: 0;
    text-align: center;
    .liItem {
        height: 35px;
        line-height: 35px;
    }
    .liItem:hover {
        cursor: pointer;
    }
}
</style>
